<template>
  <div class="app-container">
    <TheQueryForm
      :option="searchOption"
      @onSubmit="onSubmit"
      @onClear="onClear"
    ></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="24" style="display: flex; justify-content: flex-end">
        <el-button size="small" v-loading="exportLoading" @click="handleExport"
          >导出Excel</el-button
        >
      </el-col>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import { apiCommonDistrict } from "@/api/worker";
import { apiPoiPage } from "@/api/poi";
export default {
  data() {
    const _this = this;
    return {
      queryPageApi: apiPoiPage,
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          type: "Cascader",
          field: "serviceAreaId",
          label: "服务区域",
          placeholder: "服务区域",
          required: false,
          optionsKey: "name",
          optionsValue: "id",
          params: { pid: 0 },
          width: "400px",
          props: {
            checkStrictly: true,
            lazy: true,
            multiple: false,
            async lazyLoad(node, resolve) {
              let field = "";
              if (node.level > 0) {
                field = node.config.field;
              }
              const nodes = await _this.getDistrict(node.value || 0, field);
              resolve(nodes);
            },
          },
          defaultValue: "",
        },

        {
          type: "Select",
          field: "workerCategoryState",
          label: "状态",
          placeholder: "状态",
          options: [
            { label: "有效", value: "YES" },
            { label: "失效", value: "NO" },
          ],
        },
      ],
      tableOption: [
        {
          label: "编号",
          prop: "id",
          width: 50,
        },
        {
          label: "经纬度",
          prop: "createUser",
          width: 100,
          render(h, { row }) {
            return (
              <div>
                <div>东经:{row.addressLongitude}</div>
                <div>北纬:{row.addressLatitude}</div>
              </div>
            );
          },
        },
        {
          label: "省市区",
          prop: "region",
          width: 150,
          formatter({ province, city, area }) {
            return `${province} ${city} ${area}`;
          },
        },
        {
          label: "地址",
          width: 180,
          prop: "address",
          render(h, { row }) {
            const { address } = row;
            return <div class="break-wrap">{address}</div>;
          },
        },
        {
          label: "来源",
          width: 80,
          prop: "onboardingSource",
          formatter({ onboardingSource }) {
            return this.$filters.filterOnboardingSource(onboardingSource);
          },
        },
        {
          label: "是否实体店",
          width: 80,
          prop: "storesFlag",
          formatter({ storesFlag }) {
            return this.$filters.filterStoresFlag(storesFlag);
          },
        },
        {
          label: "状态",
          width: 80,
          prop: "status",
          formatter({ status }) {
            let str = "";
            switch (status) {
              case "YES":
                str = "有效";
                break;
              case "NO":
                str = "失效";
                break;

              default:
                break;
            }
            return str
          },
        },

        {
          label: "操作",
          width: 80,
          prop: "",
          fixed: "right",
          render(h, { row }) {
            return h("div", [
              h("el-link", {
                domProps: {
                  innerHTML: "查看详情",
                },
                props: {
                  type: "primary",
                },
                on: {
                  click() {
                    _this.$router.push({
                      path: "/poi/detail",
                      query: { workerId: row.workerId },
                    });
                  },
                },
              }),
            ]);
          },
        },
      ],
    };
  },
  mounted() {},
  methods: {
    getDistrict(pid, field) {
      return new Promise((resolve, reject) => {
        apiCommonDistrict({ pid })
          .then((res) => {
            resolve(
              res.data.map((item) => {
                return {
                  value: item.id,
                  label: item.name,
                  type: item.level,
                  leaf: item.level == "area",
                };
              })
            );
          })
          .catch((err) => {
            reject([]);
          });
      });
    },
    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiPoiPage({
        pageNo: 1,
        pageSize: -1,
        ...this.queryParams,
      });
      if (res.code === "SUCCESS") {
        let header = [
          {
            title: "编号",
            prop: "id",
            valueType: "s",
          },
          {
            title: "经纬度",
            prop: "lnglat",
            valueType: "s",
          },
          {
            title: "省市区",
            prop: "region",
            valueType: "s",
          },
          {
            title: "地址",
            prop: "address",
           
          },
          {
            title: "来源",
            prop: "onboardingSource",
            valueType: "s",
          },
          {
            title: "是否实体店",
            prop: "storesFlag",
            valueType: "s",
          },{
            title: "状态",
            prop: "status",
            valueType: "s",
          },
        ];

        let dataSource = res.data.map((item) => {
          return {
            ...item,
            lnglat:`东经:${item.addressLongitude},北纬:${item.addressLatitude}`,
            region:`${item.province} ${item.city} ${item.area}`,
            onboardingSource:this.$filters.filterOnboardingSource(item.onboardingSource),
            storesFlag:this.$filters.filterStoresFlag(item.storesFlag),
            status:item.status=='YES'?'有效':'失效'
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warring",
        });
        this.exportLoading = false;
      }
    },

    onSubmit({ values }) {
      console.log(values);
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          startTime: values.time ? values.time[0] : "",
          endTime: values.time ? values.time[1] : "",
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {};
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-link {
  margin: 0 5px;
}
</style>
